<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'

const imgRef = ref(null)
let xx = 0, yy = 0
let sty1 = reactive({
  transform: `rotateX(${xx}deg) rotateY(${yy}deg)`

})

const ml = () => {
  // 在imgRef.value里找key名为x的把值给ox
  const { x: ox, y: oy, height, width } = imgRef.value
  const { x, y } = window.event
  const mx = 855
  const my = 475
  // const mx = ox + width / 2
  // const my = oy + height / 2

  const xx = -(y - my) / (height / 20)
  const yy = (x - mx) / (width / 20)
  sty1.transform = `rotateX(${xx}deg) rotateY(${yy}deg)`
}
const isd = ref(false)
onMounted(() => {
})
</script>

<template>
  <div style="width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;perspective: 400px;">
    <img ref="imgRef" id="card" src="https://files.codelife.cc/tools-icon/encryptionTools.svg" alt="" @mousemove="ml()"
      :style="sty1" @click="isd = true">
    <el-dialog title="测试" width="300px" v-model="isd">
      <span></span>
      <span slot="footer">
        <el-button @click="isd = false">Cancel</el-button>
        <el-button type="primary" @click="isd = false">OK</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<style lang='less'>
#card {
  width: 200px;
  height: 200px;
  // background-color: rgb(28, 160, 160);
  border-radius: 30px;
  caret-color: transparent;
  box-shadow: 0px 0px 15px #888888;
  transition: all 0.2s linear;
}
</style>